<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <!-- 视图层 -->
    <div id="app">
        <!-- 1.文本插值 -->
        {{message}}
        <!-- 2.v-html指令 解析html代码片段 识别字符串中标签 -->
         <div v-html="str"></div>
         <!-- 3.1 动态绑定v-bind绑定变量 -->
          <div v-bind:title="title">块级元素</div>
          <!-- 3.2 v-bind可简写为 -->
          <div :title="title">块级元素</div>
          <!-- 4.使用js表达式{{}} -->
        {{3>5?'Yes':'No'}}
        {{message.split(' ').reverse().join(' ')}}
    </div>
    
    <script>
        // 创建一个vue实例
        new Vue({
            // 与模板进行绑定
            el:'#app',
            data: {
                message:'hello Vue2',
                str:'<a href="https://www.baidu.com">百度一下</a>',
                title:'悬浮文字说明'

            },
            
        })

    </script>
</body>
</html>